import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import '../KFR_css/ks_guah.css'
import { LeftOutline, SearchOutline, ClockCircleOutline, RightOutline } from 'antd-mobile-icons'
import { CheckList } from 'antd-mobile'

export default function Ks_guah() {
    const navigate = useNavigate();
    const [qb_ksl, setqb_ksl] = useState([
        { id: 1, name: '皮肤性病科', img: '/KFR_imgs/2.png' },
        { id: 2, name: '妇科', img: '/KFR_imgs/3.png' },
        { id: 3, name: '男科', img: '/KFR_imgs/4.png' },
        { id: 4, name: '儿科', img: '/KFR_imgs/5.png' },
        { id: 5, name: '中医科', img: '/KFR_imgs/6.png' },
        { id: 6, name: '精神心理科', img: '/KFR_imgs/7.png' },
        { id: 7, name: '眼科', img: '/KFR_imgs/8.png' },
        { id: 8, name: '营养科', img: '/KFR_imgs/9.png' },
        { id: 9, name: '内科', img: '/KFR_imgs/10.png' },
        { id: 10, name: '口腔科', img: '/KFR_imgs/11.png' },
        { id: 11, name: '外科', img: '/KFR_imgs/12.png' },
        { id: 12, name: '耳鼻喉外科', img: '/KFR_imgs/13.png' },
        { id: 13, name: '骨科', img: '/KFR_imgs/14.png' },
        { id: 14, name: '肿瘤科', img: '/KFR_imgs/15.png' },
        { id: 15, name: '传染科', img: '/KFR_imgs/16.png' },
        { id: 16, name: '全科', img: '/KFR_imgs/17.png' },
        { id: 17, name: '体检科', img: '/KFR_imgs/18.png' },
        { id: 18, name: '康复医学科', img: '/KFR_imgs/19.png' },
        { id: 19, name: '整形美容科', img: '/KFR_imgs/20.png' },
    ])
    const [qb_ks2,setqb_ks2]=useState([
        {id:1,name:'皮肤性病科'},
        {id:2,name:'皮肤科'},
        {id:3,name:'性病科'},
    ])
    return (
        <div className="ks_guah">
            <div className="ks_guah1">
                <div className="ks_guah1_1">
                    <div className="ks_guah1_1_1">
                        <LeftOutline fontSize={18} onClick={() => { navigate('/guah') }} />
                    </div>
                    <div className="ks_guah1_1_2">按科室挂号</div>
                </div>
            </div>

            <div className="ks_guah2">
                <div className="ks_guah2_1">
                    <div className="ks_guah2_1_1">
                        <div className="ks_guah2_1_1_1">
                            <SearchOutline fontSize={18} />
                        </div>
                        <div className="ks_guah2_1_1_2" onClick={()=>{navigate('/sou')}}>搜索科室、疾病、医院</div>
                    </div>
                </div>
            </div>

            <div className="ks_guah3">
                <div className="ks_guah3_1">
                    <div className="ks_guah3_1_1">
                        <ClockCircleOutline fontSize={16} />
                    </div>
                    <div className="ks_guah3_1_2">我的挂号记录</div>
                    <div className="ks_guah3_1_3">查看
                        <RightOutline />
                    </div>
                </div>
            </div>

            <div className="ks_guah4">
                <div className="ks_guah4_1">常见科室</div>
                <div className="ks_guah4_2">
                    <div className="ks_guah4_2_1">
                        <div className="ks_guah4_2_1_1">
                            <svg t="1739345010447" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4557" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#79CA00" opacity=".1" p-id="4558"></path><path d="M658.3424 328.6784C618.496 313.8816 576 343.0144 576 385.0752v81.152l25.4208 14.5152c0.1024-0.064 0.128-0.1664 0.2432-0.2432l57.9456-36.1984 89.9584 55.36a12.8128 12.8128 0 0 1-13.44 21.8112l-76.4288-47.04-33.1008 20.6976 134.9888 77.1456a12.7744 12.7744 0 0 1-6.3616 23.8976c-2.1504 0-4.352-0.5376-6.336-1.664l-79.9104-45.6832-12.0832 18.752 63.552 77.1584a12.8 12.8 0 1 1-19.7504 16.2816l-75.456-91.6096 21.4912-33.28L576 495.6928v102.4256c0 117.6576 96.448 213.0432 215.4112 213.0432 36.5568 0 66.176-29.312 66.176-65.472V613.2736c0-126.656-79.3728-240.0512-199.2448-284.5952M398.7584 569.408l-75.456 91.6096a12.736 12.736 0 0 1-18.0096 1.7408 12.7744 12.7744 0 0 1-1.728-18.0096l63.5392-77.184-12.0832-18.7264-79.9104 45.6704a12.7488 12.7488 0 0 1-17.4592-4.7744 12.7616 12.7616 0 0 1 4.7616-17.4464l135.0016-77.1584-33.1136-20.6976-76.4416 47.04a12.8512 12.8512 0 0 1-17.6128-4.1856 12.8 12.8 0 0 1 4.1856-17.6128l89.9584-55.36 57.9456 36.1984c0.1024 0.0768 0.1536 0.1664 0.256 0.2304L448 466.2272v-81.152c0-42.0608-42.496-71.1936-82.3424-56.3968C245.7856 373.2224 166.4 486.6176 166.4 613.2864v132.416c0 36.1728 29.632 65.4848 66.2016 65.4848C351.552 811.1872 448 715.8016 448 598.1312v-102.4256l-70.7328 40.4096 21.504 33.28z" fill="#79CA00" p-id="4559"></path><path d="M524.8 436.9664V226.304l50.8544-50.8544a12.8 12.8 0 0 0-18.0992-18.0992L512 202.9184l-45.5552-45.568a12.8 12.8 0 0 0-18.0992 18.0992L499.2 226.304v210.6624l-51.2 29.2608v29.4784l64-36.5696 64 36.5696v-29.4784l-51.2-29.2608z" fill="#79CA00" p-id="4560"></path></svg>

                        </div>
                        <div className="ks_guah4_2_1_2">呼吸内科</div>
                    </div>
                    <div className="ks_guah4_2_2">
                        <div className="ks_guah4_2_2_1">
                            <svg t="1739345340999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7969" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#f59a23" opacity=".1" p-id="7970"></path><path d="M626.176 281.6C753.792 281.6 857.6 385.408 857.6 513.024 857.6 674.7904 725.9904 806.4 564.224 806.4a291.4176 291.4176 0 0 1-207.4496-85.9264l-45.5936-45.5936a9.8432 9.8432 0 0 0-16.7808 6.9504V819.2h-89.6V680.7936C204.8 623.0144 251.8144 576 309.6064 576h82.1376C458.048 576 512 522.048 512 455.7312V166.4h25.6v289.3312c0 1.8688-0.2176 3.6992-0.2688 5.5552L537.6 460.8s-0.192 1.1264-0.4096 3.008c-0.1792 3.328-0.4096 6.6304-0.8192 9.8944-0.7296 14.7712 0.2176 39.1936 11.8016 56.9088 10.5728 7.616 19.9296 19.2768 38.016 19.2768 30.6816 0 30.6816-24.576 61.3888-24.576 30.72 0 30.72 24.576 61.4528 24.576 30.7328 0 30.7328-24.576 61.4784-24.576s28.3776 12.3008 56.9472 23.7056l1.728 0.704c1.6512-12.032 2.816-24.2176 2.816-36.6976C832 399.5264 739.6608 307.2 626.176 307.2A50.24 50.24 0 0 1 576 257.024V166.4h25.6v90.624c0 13.5552 11.0208 24.576 24.576 24.576z m126.1184 148.1856a156.5056 156.5056 0 0 0-127.6288-66.1504 12.8 12.8 0 0 1 0-25.6c58.9568 0 114.4832 28.7744 148.5312 76.9792a12.8 12.8 0 1 1-20.9024 14.7712z" fill="#f59a23" p-id="7971"></path></svg>

                        </div>
                        <div className="ks_guah4_2_2_2">消化内科</div>
                    </div>
                    <div className="ks_guah4_2_3">
                        <div className="ks_guah4_2_3_1">
                            <svg t="1739344379516" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11924" huiyi-exclude-el="m" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#79ca00" opacity=".1" p-id="11925"></path><path d="M686.0032 497.3696a38.4 38.4 0 1 0 0 76.8 38.4 38.4 0 0 0 0-76.8M334.912 497.3696a38.4 38.4 0 1 0 0 76.8 38.4 38.4 0 0 0 0-76.8M400.7424 667.4304a109.7216 109.7216 0 0 0 219.4304 0V627.2H400.7424v40.2432z" fill="#79ca00" p-id="11926"></path><path d="M804.8128 669.1072a315.3024 315.3024 0 0 0 23.808-120.4608v-40.1408c18.9184 6.1056 38.6816 21.504 38.6816 59.456 0 44.9152-28.6848 99.5328-62.4896 101.1456M512.3584 839.3216h-3.8144c-160.2688 0-290.6624-130.4064-290.6624-290.6752v-91.5712c0-45.3248 10.4448-88.2688 29.0304-126.5408l101.952 101.9648 55.9616-55.9744L460.8 432.4992l55.9616-55.9744 55.9616 55.9744 55.9744-55.9744 55.9616 55.9744 86.592-91.7248 4.8384-5.7088a288.896 288.896 0 0 1 26.9312 122.0096v91.5712c0 160.2688-130.3808 290.6752-290.6624 290.6752M153.6 567.9616c0-37.9648 19.776-53.3504 38.6816-59.456v40.1408c0 42.6624 8.4992 83.328 23.808 120.4608C182.2848 667.5072 153.6 612.8768 153.6 567.9616m675.0208-86.1184v-24.768c0-75.008-26.1632-143.872-69.7728-198.08-23.9232-36.8512-59.9168-65.1904-102.1184-83.2896A314.7776 314.7776 0 0 0 512.3584 140.8h-3.8144c-174.6688 0-316.2624 141.5936-316.2624 316.2752v24.768C152.0896 490.8672 128 522.112 128 567.9616c0 58.688 39.1424 126.8992 89.6 126.8992 3.392 0 6.72-0.4736 10.0608-0.9216 52.6208 101.5424 158.6176 170.9824 280.8832 170.9824h3.8144c122.2656 0 228.2496-69.44 280.896-170.9824 3.328 0.448 6.6688 0.9216 10.048 0.9216 50.4576 0 89.6-68.2112 89.6-126.8992 0-45.8496-24.0896-77.0944-64.2816-86.1184" fill="#79ca00" p-id="11927"></path></svg>

                        </div>
                        <div className="ks_guah4_2_3_2">儿科</div>
                    </div>
                    <div className="ks_guah4_2_4">
                        <div className="ks_guah4_2_4_1">
                            <svg t="1739344893353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10810" huiyi-exclude-el="m" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#fbe6e8" p-id="10811" data-spm-anchor-id="a313x.search_index.0.i4.14843a818shEsG" class=""></path><path d="M618.307368 608.848842a295.558737 295.558737 0 0 1-31.528421 15.97979 203.883789 203.883789 0 0 1-132.311579 6.521263 398.578526 398.578526 0 0 1-160.471579-119.349895 468.426105 468.426105 0 0 1 99.462737-89.465263 136.353684 136.353684 0 1 0 248.562527 7.895579 485.645474 485.645474 0 0 1 87.875368 81.569684 515.422316 515.422316 0 0 1-39.181474 41.472 124.389053 124.389053 0 0 1 70.682948 1.104842c13.312-15.144421 21.126737-25.788632 22.285473-27.432421a25.707789 25.707789 0 0 0 0-30.288842c-4.823579-6.790737-121.721263-165.564632-271.710315-165.564632s-266.859789 158.773895-271.737264 165.564632a25.707789 25.707789 0 0 0 0 30.288842c4.877474 6.790737 121.748211 165.564632 271.737264 165.564632a239.831579 239.831579 0 0 0 88.629894-17.812211v-2.317474a122.556632 122.556632 0 0 1 17.677474-63.676631z m-148.830315-144.303158a32.336842 32.336842 0 1 1 32.336842-32.336842 32.336842 32.336842 0 0 1-32.336842 32.336842z m66.829473 128.323369z" fill="#ec808d" p-id="10812" data-spm-anchor-id="a313x.search_index.0.i3.14843a818shEsG" class=""></path><path d="M768.053895 546.250105a29.965474 29.965474 0 0 1-6.736842 8.29979c-13.312 11.344842-37.726316 37.914947-72.380632 65.050947a347.297684 347.297684 0 0 1-98.896842 58.745263c-27.567158 2.074947 20.318316-63.757474 20.318316-63.757473l38.831158-27.75579 46.214736-37.025684s56.589474-20.129684 62.383158-12.099369 10.266947 8.542316 10.266948 8.542316z" fill="#ec808d" p-id="10813" data-spm-anchor-id="a313x.search_index.0.i6.14843a818shEsG" class=""></path><path d="M560.316632 575.676632a13.473684 13.473684 0 0 1-6.736843-25.141895 89.573053 89.573053 0 0 0 48.963369-76.126316 13.473684 13.473684 0 0 1 26.947368-1.320421 115.873684 115.873684 0 0 1-62.464 100.729263 13.473684 13.473684 0 0 1-6.709894 1.859369z" fill="#fbe6e8" p-id="10814"></path></svg>
                        </div>
                        <div className="ks_guah4_2_4_2">眼科</div>
                    </div>
                    <div className="ks_guah4_2_5">
                        <div className="ks_guah4_2_5_1">
                            <svg t="1739344603093" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13277" huiyi-exclude-el="m" data-spm-anchor-id="a313x.search_index.0.i10.54e93a81TlS24b" width="200" height="200"><path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#dbeeff" opacity=".8" p-id="13278" data-spm-anchor-id="a313x.search_index.0.i6.54e93a81TlS24b" class=""></path><path d="M435.2 128a76.8 76.8 0 0 1 40.422 142.131L512 524.8l-12.8 12.8-73.344-256.563A76.8 76.8 0 0 1 435.2 128zM214.4 817.766a76.8 76.8 0 0 1 99.994-107.52l205.824-165.734 10.905 14.464-180.557 188.058a76.8 76.8 0 0 1-136.192 70.732z" fill="#4dabff" p-id="13279"></path><path d="M532.634 801.357a51.2 51.2 0 0 1-21.888-96.051l-17.434-168.858 11.52-0.794L543.488 699.7a51.2 51.2 0 0 1-10.854 101.658z" fill="#4dabff" p-id="13280"></path><path d="M305.997 435.456a51.2 51.2 0 0 1 91.238 37.197l148.327 82.56-5.94 9.881-156.544-62.412a51.2 51.2 0 0 1-77.081-67.2z" fill="#4dabff" p-id="13281"></path><path d="M695.552 385.536a51.2 51.2 0 0 0-78.515 59.546L495.13 563.2l8.32 8.013 135.04-100.839a51.2 51.2 0 0 0 57.062-84.838z" fill="#4dabff" p-id="13282"></path><path d="M802.1 741.478a76.8 76.8 0 0 0-105.191-102.297L473.6 486.4l-12.8 12.8 198.784 187.11a76.826 76.826 0 0 0 142.515 55.168z" fill="#4dabff" p-id="13283"></path><path d="M435.2 537.6a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0z" p-id="13284" fill="#4dabff" data-spm-anchor-id="a313x.search_index.0.i9.54e93a81TlS24b" class="selected"></path></svg>
                        </div>
                        <div className="ks_guah4_2_5_2">精神外科</div>
                    </div>
                </div>
            </div>

            <div className="ks_guah5">
                <div className="ks_guah5_1">全部科室</div>
                <div className="ks_guah5_2">
                    <div className="ks_guah5_2_1">
                        <ul>
                            {
                                qb_ksl.map((ele, index) => {
                                    return <li key={ele.id}>
                                        <div className="ks_guah5_2_1_1">
                                            <img src={ele.img} />
                                        </div>
                                        <div className="ks_guah5_2_1_2">{ele.name}</div>
                                    </li>
                                })
                            }
                        </ul>
                    </div>

                    <div className="ks_guah5_2_2">
                        <CheckList>
                            {
                                qb_ks2.map((ele, index) => {
                                    return <CheckList.Item value={ele.name} key={ele.id}>{ele.name}</CheckList.Item>
                                })
                            }
                        </CheckList>
                    </div>
                </div>
            </div>
        </div>
    )
}